<style lang="less">
@import "../../../styles/table-common.less";
</style>
<template>
  <div class="searche">
    <Card>
      <Row>
        <div class="but">
          <!-- <Button icon="md-add" @click="AddNewlevel">新增一级</Button>
          <div style="margin-left: 10px"></div>
          <Button icon="md-add" @click="NewSecondary">新增二级</Button>
          <div style="margin-left: 10px"></div>
          <Button type="error" icon="md-trash" @click="deleteMone"
            >删除一级</Button
          >
          <div style="margin-left: 10px"></div>
          <Button
            :disabled="deletetow"
            type="error"
            icon="md-trash"
            @click="deleteMtwo"
            >删除二级</Button
          > -->
          <!-- <div style="margin-left: 10px"></div>
          <Button>重置</Button> -->
          <div style="margin-left: 10px"></div>
          <Button icon="md-refresh" @click="getDataList">刷新</Button>
        </div>
      </Row>
      <Row>
        <Col flex="auto">
          <div v-if="this.gettation.length == 0" class="Menucss MenuItemCss">
            &nbsp; 暂无数据 &nbsp;
          </div>
          <div v-else>
            <Menu
              width="200px"
              v-if="MenuaOne"
              @on-select="MenuItclck"
              class="Menucss"
            >
              <MenuItem
                class="MenuIspan"
                @on-dblclick="dblclicktew"
                v-for="item in gettation"
                :key="item"
                :name="item.id"
              >
                {{ item.categoryMess }}
              </MenuItem>
            </Menu>
          </div>
        </Col>
        <Col flex="auto">
          <div v-if="this.secondLevel.length == 0" class="Menucss MenuItemCss">
            &nbsp; 暂无数据 &nbsp;
          </div>
          <div v-else>
            <Menu
              width="200px"
              v-if="Menutwo"
              @on-select="MenuIsecond"
              class="Menucss MenuItemCss"
            >
              <MenuItem
                class="MenuIspan"
                v-for="item in secondLevel"
                :key="item"
                :name="item.id"
              >
                {{ item.custMess }}
              </MenuItem>
            </Menu>
          </div>
        </Col>
        <Col span="12">
          <div class="editorcss">
            <div>
              <editor
                id="editorId"
                v-if="Secondary"
                v-model="editorContent"
              ></editor>
            </div>
            <!-- <Input
              placeholder="请输入回答内容"
              type="textarea"
              :rows="4"
              :autosize="{ minRows: 10, maxRows: 11 }"
              v-model="editorContent"
            ></Input> -->
            <div class="editorbut">
              <div></div>
              <div>
                <Button type="primary" @click="modifyne" :disabled="modify"
                  >修改</Button
                >
              </div>
            </div>
          </div>
        </Col>
      </Row>

      <!--  -->
      <Modal
        v-model="newlyAdded"
        :title="titleNew"
        :width="this.titleNew == '新增二级' ? '50%' : '23%'"
      >
        <!-- 一级新增 -->
        <div v-if="classA">
          <Form
            ref="formadd"
            :model="formadd"
            :rules="ruleadd"
            :label-width="80"
          >
            <FormItem label="类目信息" prop="categoryMess">
              <Input
                v-model="formadd.categoryMess"
                placeholder="类目信息"
              ></Input>
            </FormItem>
                <FormItem label="展示对象" prop="categoryType">
              <Select
                clearable
                v-model="formadd.categoryType"
                style="width: 210px"
                placeholder="选择展示对象"
              >
                <Option
                  v-for="(item, index) in categoryTypeList"
                  :key="index"
                  :value="item.value"
                  >{{ item.label }}
                </Option>
              </Select>
            </FormItem>
            <FormItem label="排序" prop="sort">
              <InputNumber
                :max="10"
                :min="1"
                v-model="formadd.sort"
              ></InputNumber>
            </FormItem>
          </Form>
        </div>
        <!-- 二级新增 -->
        <div v-if="secondLe">
          <Form
            ref="formSecond"
            :model="formSecond"
            :rules="ruleSecond"
            :label-width="80"
          >
            <FormItem label="一级类目">
              {{ custMenuI }}
            </FormItem>
            <FormItem label="提问问题" prop="custMess">
              <Input
                style="width: 50%"
                v-model="formSecond.custMess"
                placeholder="提问问题"
              ></Input>
            </FormItem>
            <FormItem label="排序" prop="sort">
              <InputNumber
                :max="10"
                :min="1"
                v-model="formSecond.sort"
              ></InputNumber>
            </FormItem>
            <FormItem label="解答问题" prop="replayMess">
              <editor
                ref="editortow"
                id="editortow"
                v-if="editortoew"
                v-model="formSecond.replayMess"
              ></editor>
              <!-- <Input
                type="textarea"
                :rows="4"
                :autosize="{ minRows: 7, maxRows: 11 }"
                v-model="formSecond.replayMess"
                placeholder="解答问题"
              ></Input> -->
            </FormItem>
          </Form>
        </div>
        <div slot="footer">
          <Button @click="newlyAdded = false">取消</Button>
          <Button type="primary" @click="AddConfirmation">确定</Button>
        </div>
      </Modal>
      <!-- 修改类目 -->
      <!-- <div>
        <Modal v-model="ModifyCtegory" :title="titleCtegory">
          <Form
            ref="formCtegory"
            :model="formCtegory"
            :rules="ruleCtegory"
            :label-width="80"
            inline
          >
            <FormItem label="一级类目" v-if="onel" prop="replayPrimary">
              <Input
                v-model="formCtegory.replayPrimary"
                placeholder="一级类目"
              ></Input>
            </FormItem>

            <FormItem label="展示对象" v-if="onel" prop="categoryType">
              <Select
                clearable
                v-model="formCtegory.categoryType"
                style="width: 210px"
                placeholder="选择展示对象"
              >
                <Option
                  v-for="(item, index) in categoryTypeList"
                  :key="index"
                  :value="item.value"
                  >{{ item.label }}
                </Option>
              </Select>
            </FormItem>

            <FormItem label="二级类目" v-if="twoL" prop="Secondary">
              <Input
                v-model="formCtegory.Secondary"
                placeholder="二级类目"
              ></Input>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button @click="ModifyCtegory = false">取消</Button>
            <Button type="primary" @click="ACtegory">确定</Button>
          </div>
        </Modal>
      </div> -->
    </Card>
  </div>
</template>

<script>
import editor from "@/views/my-components/freight/editor";
import {
  getMsgCustCategoryList,
  getMsgCustMessIdList,
  saveMsgCustCategory,
  saveMsgCustMess,
  deleteMsgCustCategory,
  deleteMsgCustMess,
  getMsgCustMessId,
} from "@/api/index";
import userChoose from "@/views/my-components/freight/user-choose";
import { el } from "date-fns/locale";
export default {
  components: {
    userChoose,
    editor,
  },
  title: "message-kefu",
  data() {
    return {
      editortoew: false,
      Menutwo: false,
      MenuIon: 1,
      deletetow: true,
      categoryone: "",
      categorytwo: "",
      modify: true,
      classA: true,
      Secondary: true,
      secondLe: false,
      editorContent: "",
      newlyAdded: false,
      titleNew: "新增一级",
      MenuItclckId: "",
      custMenuI: "",
      // 一级
      formadd: {
        categoryMess: "",
        sort: 0,
        categoryType:""
      },
      ruleadd: {
        categoryMess: [
          {
            required: true,
            message: "请输入类目信息",
            trigger: "blur",
          },
        ],
         categoryType:[
          {
            required: true,
            message: "选择展示对象",
            trigger: "change",
          },
        ],
        sort: [
          {
            required: true,
            type: "number",
            message: "请输入排序",
            trigger: "blur",
          },
        ],
      },
      // 二级
      formSecond: {
        msgCustCategoryId: "",
        custMess: "",
        replayMess: "",
        sort: "",
      },

      ruleSecond: {
        custMess: [
          {
            required: true,
            message: "请输入提问问题",
            trigger: "blur",
          },
        ],
        replayMess: [
          {
            required: true,
            message: "请输入解答问题",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            type: "number",
            message: "请输入排序",
            trigger: "blur",
          },
        ],
      },
      userId: JSON.parse(Cookies.get("userInfo")).id,
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      modifydata: "",
      total: 0, // 表单数据总数
      dictMessageType: this.$store.state.dict.messageType,
      gettation: [],
      secondLevel: [],
      ModifyCtegory: false,
      formCtegory: {
        replayPrimary: "",
        Secondary: "",
        categoryType:""
      },
     
      categoryTypeList: [
        { value: "0", label: "货主" },
        { value: "1", label: "驾驶员" },
        { value: "2", label: "平台" },
        { value: "3", label: "全部" },
      ],
      ruleCtegory: {
        Secondary: [
          {
            required: true,
            message: "请输入二级类目",
            trigger: "blur",
          },
        ],
        replayPrimary: [
          {
            required: true,
            message: "请输入一级类目",
            trigger: "blur",
          },
        ],
        categoryType:[
          {
            required: true,
            message: "选择展示对象",
            trigger: "change",
          },
        ],
      },
      titleCtegory: "修改一级类目",
      ACtegortiem: [],
      ModifyL: 1,
      onel: false,
      twoL: false,
      twoList: [],
      arrOne: [],
      arrTwo: [],
      MenuaOne: true,
    };
  },
  methods: {
    init() {
      this.getDataList();
    },
    getDataList() {
      this.arrOne = [];
      this.arrTwo = [];
      this.MenuaOne = false;
      this.$nextTick(() => {
        this.MenuaOne = true;
      });
      this.searchForm.userId = this.userId;
      getMsgCustCategoryList(this.searchForm).then((res) => {
        if (res.code == 200) {
          if (res.result.content.length > 0) {
            this.gettation = res.result.content;
          } else {
            this.gettation = [];
          }
        } else {
        }
      });
    },
    // 删除一
    deleteMone() {
      if (typeof this.categoryone.id == "undefined") {
        this.$Message.warning("请选择要删除的类目");
      } else {
        this.$Modal.confirm({
          title: "确认删除",
          // 记得确认修改此处
          content: "您确认将" + this.categoryone.categoryMess + "删除?",
          onOk: () => {
            // 删除\
            deleteMsgCustCategory({
              msgCustCategoryId: this.categoryone.id,
            }).then((res) => {
              this.$Message.success("操作成功");
              this.getDataList();
            });
          },
        });
      }
    },
    // 删除二
    deleteMtwo() {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认将" + this.modifydata.custMess + "删除?",
        onOk: () => {
          // 删除
          deleteMsgCustMess({
            msgCustMessId: this.modifydata.id,
          }).then((res) => {
            this.$Message.success("操作成功");
            this.MenuItclck(this.searchForm.msgCustCategoryId, 2);
          });
        },
      });
    },
    // 修改
    modifyne() {
      let data = {
        msgCustCategoryId: this.searchForm.msgCustCategoryId,
        id: this.modifydata.id,
        custMess: this.modifydata.custMess,
        replayMess: this.editorContent,
        sort: this.modifydata.sort,
      };
      saveMsgCustMess(data).then((res) => {
        if (res.code == 200) {
          this.newlyAdded = false;
          this.$Message.success("修改成功");
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 新增二级
    NewSecondary() {
      this.secondLe = false;
      this.editortoew = false;
      this.$nextTick(function () {
        this.editortoew = true;
      });
      this.formSecond.custMess = "";
      this.formSecond.replayMess = "";
      this.custMenuI = "";
      if (typeof this.searchForm.msgCustCategoryId != "undefined") {
        this.gettation.forEach((item) => {
          if (this.searchForm.msgCustCategoryId == item.id) {
            this.custMenuI = item.categoryMess;
          }
        });
        this.formSecond.msgCustCategoryId = this.searchForm.msgCustCategoryId;
        if (this.secondLevel.length == 0) {
          this.formSecond.sort = 1;
        } else {
          this.formSecond.sort = this.secondLevel[0].sort + 1;
        }
        this.newlyAdded = true;
        this.secondLe = true;
        this.classA = false;
        this.titleNew = "新增二级";
      } else {
        this.$Message.warning("请先点击选择一级类目");
      }
    },
    // 新增一级
    AddNewlevel() {
      // this.editortoew = false;
      this.secondLe = false;
      this.classA = true;
      this.newlyAdded = true;
      this.titleNew = "新增一级";
      if (this.gettation.length == 0) {
        this.formadd.sort = 1;
      } else {
        this.formadd.sort = this.gettation[0].sort + 1;
      }
      this.formadd.categoryMess = "";
    },
    // 修改
    ACtegory() {
      if (this.titleCtegory == "修改一级类目") {
        this.$refs.formCtegory.validate((valid) => {
          if (valid) {
            this.ACtegortiem.categoryMess = this.formCtegory.replayPrimary;
            this.ACtegortiem.categoryType = this.formCtegory.categoryType;
            saveMsgCustCategory(this.ACtegortiem).then((res) => {
              if (res.code == 200) {
                this.ModifyCtegory = false;
                this.onel = false;
                this.twoL = false;
                this.getDataList();
                this.$Message.success("修改成功");
                // this.formCtegory.categoryType=""
              } else {
                this.$Message.error(res.message);
              }
            });
          }
        });
      } else {
        this.$refs.formCtegory.validate((valid) => {
          if (valid) {
            this.twoList.custMess = this.formCtegory.Secondary;
            saveMsgCustMess(this.twoList).then((res) => {
              if (res.code == 200) {
                this.ModifyCtegory = false;
                this.onel = false;
                this.twoL = false;
                this.MenuItclck(this.twoList.msgCustCategoryId, 2);
                this.$Message.success("修改成功");
              } else {
                this.$Message.error(res.message);
              }
            });
          }
        });
      }
    },
    // 新增确定
    AddConfirmation() {
      if (this.titleNew == "新增一级") {
        this.$refs.formadd.validate((valid) => {
          if (valid) {
            saveMsgCustCategory(this.formadd).then((res) => {
              if (res.code == 200) {
                this.newlyAdded = false;
                this.getDataList();
                this.$Message.success("添加成功");
                this.formadd.categoryType=""
              } else {
                this.$Message.error(res.message);
              }
            });
          }
        });
      } else {
        this.$refs.formSecond.validate((valid) => {
          if (valid) {
            saveMsgCustMess(this.formSecond).then((res) => {
              if (res.code == 200) {
                this.newlyAdded = false;
                this.MenuItclck(this.formSecond.msgCustCategoryId, 2);
                this.$Message.success("添加成功");
              } else {
                this.$Message.error(res.message);
              }
            });
          }
        });
      }
    },
    //
    // 点击二级
    MenuIsecond(val) {
      this.arrOne = [];
      this.arrTwo.push({
        val: val,
      });
      if (this.arrTwo.length == 2) {
        if (this.arrTwo[0].val == this.arrTwo[1].val) {
          this.arrTwo = [];
          this.onel = false;
          this.twoL = true;
          this.ModifyCtegory = true;
          this.titleCtegory = "修改二级类目";
          this.secondLevel.forEach((item) => {
            if (item.id == val) {
              this.twoList = item;
              this.formCtegory.Secondary = item.custMess;
            }
          });
        } else {
          this.arrTwo = [];
          this.arrTwo.push({
            val: val,
          });
        }
      }
      this.deletetow = false;
      this.modify = false;
      this.Secondary = false;
      this.$nextTick(() => {
        this.Secondary = true;
      });
      getMsgCustMessId({ id: val }).then((res) => {
        if (res.result.content != "") {
          this.editorContent = res.result.content;
        } else {
          this.editorContent = "";
        }
        this.modifydata = res.result;
      });
    },
    dblclicktew() {},
    // 点击一级
    MenuItclck(val, num) {
      this.Secondary = false;
      this.$nextTick(() => {
        this.Secondary = true;
      });
      this.Menutwo = false;
      this.editorContent = "";
      this.arrTwo = [];
      if (num == 2) {
        this.arrOne = [];
      }
      this.arrOne.push({
        val: val,
      });
      if (this.arrOne.length == 2) {
        if (this.arrOne[0].val == this.arrOne[1].val) {
          this.ModifyCtegory = true;
          this.onel = true;
          this.twoL = false;
          this.arrOne = [];
          this.titleCtegory = "修改一级类目";
          this.gettation.forEach((item) => {
            if (item.id == val) {
              this.ACtegortiem = item;
              this.formCtegory.replayPrimary = item.categoryMess;
                this.formCtegory.categoryType=item.categoryType
              
            }
          });
        } else {
          this.arrOne = [];
          this.arrOne.push({
            val: val,
          });
        }
      }
      this.deletetow = true;
      this.gettation.forEach((item) => {
        if (item.id == val) {
          this.categoryone = item;
        }
      });
      this.editorContent = "";
      this.modify = true;
      this.searchForm.msgCustCategoryId = val;
      this.bus.$emit("loading", true);
      getMsgCustMessIdList(this.searchForm).then((res) => {
        if (res.code != 200) {
          this.bus.$emit("loading", false);
        } else {
          this.bus.$emit("loading", false);
        }
        if (res.result.content.length > 0) {
          this.Menutwo = true;
          this.secondLevel = res.result.content;
        } else {
          this.secondLevel = [];
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.selectDate = null;
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    showSelect(e) {
      this.selectList = e;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less">
.editorcss {
  margin-left: 3.4rem;
  margin-top: 3rem;
  height: 44rem;
}
.editorbut {
  margin-top: 20px;
  margin-left: 46.3rem;
}
.but {
  display: flex;
  margin-left: 15px;
}
.Menucss {
  margin-top: 3rem;
  height: 44rem;
}
.MenuItemCss {
  margin-left: 1rem;
}
.searche {
  height: 100%;
  width: 100%;
}
.MenuIspan {
  width: 93%;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivu-btn-text {
  border: 1px solid #eee;
}
// .replyinptu {
//   textarea.ivu-input {
//     border: 1px solid transparent;
//     outline: none;
//     border: none;
//     box-shadow: 0 0 0 2px transparent;
//     // border-bottom: 1.3px solid gainsboro;
//   }
// }
</style>